<script setup lang="ts" name="mainInfo">
import { useCurrActStroe } from '@/stores/currActStore'
import { storeToRefs } from 'pinia'
const { currUser } = storeToRefs(useCurrActStroe())
</script>
<template>
  <div id="mainInfo">
    <img :src="currUser.img" alt="" />
    <b>{{ currUser.name }}</b>
  </div>
</template>

<style scoped lang="less">
* {
  color: var(--color3);
}
#mainInfo {
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-auto-rows: 64px;
  align-items: center;
  justify-items: center;
  background-color: var(--color2);
  border-radius: var(--radius);
  overflow: hidden;
  img {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
  }
  b {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

    max-width: calc(200px - 64px);
  }
}
</style>
